<template>
  <!-- 收获地址页面 -->
  <div>
    <div class="box">
      <div class="boxin">
        <!-- 头部搜索 -->
        <div class="header">
          <el-input v-model="input1" placeholder="用户id"></el-input
          ><el-input v-model="input2" placeholder="收货人名称"></el-input>
          <el-button type="primary" @click="selet">查找</el-button>
          <el-button type="primary" @click="derive">导出</el-button>
        </div>
        <!-- 身体内容 -->
        <div class="bottom">
          <!-- 内容 -->
          <div class="content">
            <template>
              <el-table :data="tableData" style="width: 100%" border>
                <el-table-column
                  label="地址id"
                  align="center"
                  prop="id"
                  sortable
                >
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="用户id'" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.userId
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="收货人名称" width="80" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="手机号码" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tel }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="区域地址" align="center">
                  <template slot-scope="scope">
                    <span
                      >{{ scope.row.province }}{{ scope.row.city
                      }}{{ scope.row.county }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column label="详细地址" align="center">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{
                      scope.row.addressDetail
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="默认" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isDefault == true">是</span>
                    <span v-if="scope.row.isDefault == false">否</span>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 分页 -->
          <div>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as XLSX from "xlsx";
import { list } from "@/api/yonghuguanli/shouhuodizhi";
import { sele } from "@/api/yonghuguanli/shouhuodizhi";
export default {
  data() {
    return {
      input1: "", //用户名
      input2: "", //用户id
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      total: 0,
      currentPage4: 1, //当前页
      pageNum: 10, //每页显示多少条
      inp1: "",
      tableData1: "",
      options1: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 2,
          label: "女",
        },
      ],
    };
  },
  methods: {
    //分页点击
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          console.log(res);
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      list(this.currentPage4, this.pageNum).then((res) => {
        if (res.errmsg == "成功") {
          this.tableData = res.data.list;
          this.total = res.data.total;
          console.log(res);
        }
      });
    },
    //查找
    selet() {
      sele(this.currentPage4, this.pageNum, this.input2, this.input1).then(
        (res) => {
          if (res.errmsg == "成功") {
            console.log(res);
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    //导出
    derive() {
      const tableData = this.tableData; // 如果表格数据为空，提示

      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "地址id",
        "用户id",
        "收货人名称",
        "手机号码",
        "区域地址",
        "详细地址",
        "默认",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.id || "暂无", // 如果为空，填充为“暂无”
          item.userId || "暂无",
          item.name || "暂无",
          item.tel || "暂无",
          item.province || "暂无",
          item.addressDetail || "暂无",
          item.isDefault === true ? "是" : item.isDefault === false ? "否" : "否", // 转换
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "数据列表.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
  },
  created() {
    list(this.currentPage4, this.pageNum).then((res) => {
      if (res.errmsg == "成功") {
        this.tableData = res.data.list;
        this.total = res.data.total;
        console.log(res);
      }
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
}
.el-input {
  width: 300px;
}
.img1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #c0c4cc;
}
.xiangqing {
  background-color: #1890ff;
  color: #fff;
}
.tan {
  text-align: center;
}
.tan > div {
  width: 350px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tan > div > .el-input {
  width: 240px;
}
.block {
  margin: 50px;
}
</style>